<template>
	<view class="chat-list">
		<view class="chatTime">{{item.timeDate}}</view>
		<view class="chatBox " :class="[item.isme ?'': 'chatboxme']">
			<view class="chatHead" v-if="item.isme">
				<image :src="item.toppic" mode="widthFix"></image>
			</view>
			<view class="chatbody">
				<text v-if="item.type=='text'">{{item.desc}}</text>
				<image :src="item.imgpic" mode="" v-if="item.type=='image'"></image>
			</view>
			<view class="chatHead"  v-if="!item.isme">
				<image :src="item.toppic" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:Object,
			index:Number
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.userSearch {
		position: fixed;
		bottom: 10upx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100upx;

		&>input {
			padding: 10upx 10upx;
			border-radius: 10upx;
			flex: 1;
			margin-left: 20upx;
			background-color: #F7F7F7;
		}

		&>view {
			width: 80upx;
			text-align: center;
			font-size: 40upx;
		}
	}

	.chatBox {
		padding: 0 20upx;
		display: flex;
		justify-content: flex-start;

		.chatHead {
			width: 100upx;
			height: 100upx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}

		.chatbody {
			background-color: #F4F4F4;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			padding: 20upx;
			position: relative;
			margin-right: 100upx;
			margin-left: 20upx;

			&::after {
				position: absolute;
				left: -36upx;
				top: 30upx;
				right: 0;
				width: 0;
				height: 0;
				content: '';
				border: 10px solid #F4F4F4;
				border-color: transparent #F4F4F4 transparent transparent;
			}

			image {
				max-width: 400upx;
				max-height: 300upx;
			}
		}
	}

	.chatboxme {
		justify-content: flex-end;

		.chatbody {
			margin-left: 100upx;
			margin-right: 20upx;

			&::after {
				left: auto;
				right: -36upx;
				border-color: transparent transparent transparent #F4F4F4;
			}
		}
	}

	.chatTime {
		text-align: center;
		padding: 20upx 0;
		color: #CCCCCC;
	}
</style>

